<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./bs/css/bootstrap.min.css">
    <script src="./bs/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="./bootstrap-icons-1.11.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="./style/index.css">
    <title>Document</title>
</head>
<body>
<header class="bg-white">
    <nav class="container  d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3  border-bottom">
        <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
            <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
                <use xlink:href="#bootstrap"></use>
            </svg>
        </a>

        <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
            <li><a href="#" class="nav-link px-2 link-secondary">首页</a></li>
            <li><a href="#" class="nav-link px-2 link-dark">男装</a></li>
            <li><a href="#" class="nav-link px-2 link-dark">女装</a></li>
            <li><a href="#" class="nav-link px-2 link-dark">童装</a></li>
            <li><a href="#" class="nav-link px-2 link-dark">婴幼儿装</a></li>
            <li><a href="#" class="nav-link px-2 link-dark">仓库地址</a></li>
        </ul>

        <div class="col-md-3 text-end">
            <a href="./login.html" target="_blank" class="text-decoration-none">
                <button type="button" class="btn btn-outline-primary me-2">

                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                         class="bi bi-person"
                         viewBox="0 0 16 16">
                        <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                    </svg>
                </button>
            </a>
            <a href="./ShoppingCart.html" class="text-decoration-none">
                <button type="button" class="btn btn-outline-primary me-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                         class="bi bi-cart"
                         viewBox="0 0 16 16">
                        <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                    </svg>
                </button>
            </a>
        </div>
    </nav>
</header>
<section class=" bg-black mt-5 position-relative">
    <div id="demo" class="carousel  slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <!--            <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>-->
            <!--            <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>-->
            <!--            <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>-->
        </div>
        <div class="carousel-inner">
            <!--            <div class="carousel-item active">-->
            <!--                <img src="./img/10-T3.jpg" class="d-block" style="width:100%">-->
            <!--                <div class="carousel-caption">-->
            <!--                    <h1>全球品牌形象大使Adam Scott(亚当·斯科特)<br>穿着款新品登场！</h1>-->
            <!--                    <p>商务与高尔夫球场合皆适穿</p>-->
            <!--                    <button type="button" class="btn btn-primary ">查看更多商品</button>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class="carousel-item">-->
            <!--                <img src="./img/10-T1.jpg" class="d-block" style="width:100%">-->
            <!--                <div class="carousel-caption text-start">-->
            <!--                    <h1>UNIQLO × SWEDEN ATHLETE COLLECTION<br>正在热卖中！</h1>-->
            <!--                    <p>LifeWear合作系列的出众功能性与简约之美</p>-->
            <!--                    <button type="button" class="btn btn-primary ">查看更多商品</button>-->

            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class="carousel-item ">-->
            <!--                <img src="./img/10-T4.jpg" class="d-block" style="width:100%">-->
            <!--                <div class="carousel-caption text-end ">-->
            <!--                    <h1>UNIQLO × Marimekko 2024 夏日合作系列<br>正在热卖中！</h1>-->
            <!--                    <p>艺术印花 斑斓夏日</p>-->
            <!--                    <button type="button" class="btn btn-primary ">查看更多商品</button>-->

            <!--                </div>-->
            <!--            </div>-->
        </div>

        <!-- 左右切换按钮 -->
        <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>
</section>
<section>
    <div class="container px-4 py-5" id="new-cards">
        <h2 class="pb-2 border-bottom text-info fs-2 fst-italic">NEW!</h2>
        <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
            <!--            <div class="col">-->
            <!--                <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg"-->
            <!--                     style="background: url('./img/4-T1_01.jpg')  center center;background-size: cover; ">-->
            <!--                    <div class="d-flex flex-column h-100 px-5 pb-1 text-white text-shadow-1">-->
            <!--                        <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold text-danger">限时特优149元*起</h3>-->
            <!--                        <h5>吸汗速干 舒适不闷汗</h5>-->
            <!--                        <ul class="d-flex list-unstyled mt-auto">-->
            <!--                            <li class="me-auto">-->
            <!--                                <button type="button" class="btn btn-primary">去购买-->
            <!--                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"-->
            <!--                                         class="bi bi-arrow-right" viewBox="0 0 16 16">-->
            <!--                                        <path fill-rule="evenodd"-->
            <!--                                              d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>-->
            <!--                                    </svg>-->
            <!--                                </button>-->
            <!--                            </li>-->
            <!--                            <li class="d-flex align-items-center me-3">-->
            <!--                                <small>休闲短裤</small>-->
            <!--                            </li>-->
            <!--                            <li class="d-flex align-items-center">-->
            <!--                                <small><small>活动期间: 6/14-6/20*</small></small>-->
            <!--                            </li>-->
            <!--                        </ul>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->

            <!--            <div class="col">-->
            <!--                <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg"-->
            <!--                     style="background: url('./img/4-T2_01.jpg')  center center;background-size: cover; ">-->
            <!--                    <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">-->
            <!--                        <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold text-danger">限时特优149元*起</h3>-->
            <!--                        <h5>吸汗速干 舒适不闷汗</h5>-->
            <!--                        <ul class="d-flex list-unstyled mt-auto">-->
            <!--                            <li class="me-auto">-->
            <!--                                <button type="button" class="btn btn-primary">去购买-->
            <!--                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"-->
            <!--                                         class="bi bi-arrow-right" viewBox="0 0 16 16">-->
            <!--                                        <path fill-rule="evenodd"-->
            <!--                                              d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>-->
            <!--                                    </svg>-->
            <!--                                </button>-->
            <!--                            </li>-->
            <!--                            <li class="d-flex align-items-center me-3">-->
            <!--                                <small>休闲短裤</small>-->
            <!--                            </li>-->
            <!--                            <li class="d-flex align-items-center">-->
            <!--                                <small><small>活动期间: 6/14-6/20*</small></small>-->
            <!--                            </li>-->
            <!--                        </ul>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->

            <!--            <div class="col">-->
            <!--                <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg"-->
            <!--                     style="background: url('./img/3-T4_01.jpg')  center center;background-size: cover; ">-->
            <!--                    <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">-->
            <!--                        <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold text-danger">限时特优79元*起</h3>-->
            <!--                        <h5>柔软亲肤 舒享悠然生活</h5>-->
            <!--                        <ul class="d-flex list-unstyled mt-auto">-->
            <!--                            <li class="me-auto">-->
            <!--                                <button type="button" class="btn btn-primary">去购买-->
            <!--                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"-->
            <!--                                         class="bi bi-arrow-right" viewBox="0 0 16 16">-->
            <!--                                        <path fill-rule="evenodd"-->
            <!--                                              d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>-->
            <!--                                    </svg>-->
            <!--                                </button>-->
            <!--                            </li>-->
            <!--                            <li class="d-flex align-items-center me-3">-->
            <!--                                <small>全棉松紧短裤</small>-->
            <!--                            </li>-->
            <!--                            <li class="d-flex align-items-center">-->
            <!--                                <small><small>活动期间: 6/21-6/27*</small></small>-->
            <!--                            </li>-->
            <!--                        </ul>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->

        </div>
    </div>
</section>
<section class="container" id="join">
    <div>
        <div class="bg-light p-5 rounded">
            <div class="col-sm-8 mx-auto">
                <h1>Navbar examples</h1>
                <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars
                    extend the width of the viewport, others are confined within a <code>.container</code>. For
                    positioning of navbars, checkout the <a href="/docs/examples/navbar-static/">top</a> and <a
                            href="/docs/examples/navbar-fixed/">fixed top</a> examples.</p>
                <p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to
                    toggle the collapsed content.</p>
                <p>
                    <a class="btn btn-primary" href="/docs/components/navbar/" role="button">View navbar docs »</a>
                </p>
            </div>
        </div>
    </div>
    <hr class="featurette-divider">

</section>
<section class="container" id="consultation">
    <hr class="featurette-divider">
    <div class="row featurette">
        <div class="col-md-7">
            <h2 class="featurette-heading fw-normal lh-1">العنوان الأول المميز. <span
                    class="text-muted"> سيذهل عقلك. </span></h2>
            <p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات
                المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل
                مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
        </div>
        <div class="col-md-5">
            <img src="./img/5-T4_01.jpg" alt=""
                 class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500"
                 height="500">
        </div>
    </div>
    <hr class="featurette-divider">
    <div class="row featurette">
        <div class="col-md-7 order-md-2">
            <h2 class="featurette-heading fw-normal lh-1">أوه نعم، هذا جيد. <span
                    class="text-muted"> شاهد بنفسك. </span></h2>
            <p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء
                "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف
                والشفتين.</p>
        </div>
        <div class="col-md-5 order-md-1">
            <img src="./img/5-T3_01.jpg" alt=""
                 class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500"
                 height="500">
        </div>
    </div>
    <hr class="featurette-divider">

</section>
<section class="container">
    <h2 class="display-6 text-center mb-4">常见问题指南</h2>
    <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
        <div class="table-responsive col w-100">
            <table class="table text-center">
                <tbody>
                <tr>
                    <th scope="row" class="text-start">Public</th>
                <tr>
                    <th scope="row" class="text-start">Private</th>
                </tr>
                <tr>
                    <th scope="row" class="text-start">Permissions</th>
                </tr>
                <tr>
                    <th scope="row" class="text-start">Permissions</th>
                </tr>
                <tr>
                    <th scope="row" class="text-start">Unlimited members</th>
                    <td></td>
                    <td>
                        <svg class="bi" width="24" height="24">
                            <use xlink:href="#check"></use>
                        </svg>
                    </td>
                    <td>
                        <svg class="bi" width="24" height="24">
                            <use xlink:href="#check"></use>
                        </svg>
                    </td>
                </tr>
                <tr>
                    <th scope="row" class="text-start">Extra security</th>
                    <td></td>
                    <td></td>
                    <td>
                        <svg class="bi" width="24" height="24">
                            <use xlink:href="#check"></use>
                        </svg>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>
<footer class="d-flex flex-wrap container justify-content-between align-items-center py-3 my-4 border-top">
    <div class="col-md-4 d-flex align-items-center">
        <a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
            <i class="bi bi-bootstrap"></i>
        </a>
        <span class="mb-3 mb-md-0 text-muted">© lihaotian</span>
    </div>

    <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
        <li class="ms-3"><a class="text-muted" href="#"><i class="bi bi-twitter"></i></a></li>
        <li class="ms-3"><a class="text-muted" href="#"><i class="bi bi-instagram"></i></a></li>
        <li class="ms-3"><a class="text-muted" href="#"><i class="bi bi-facebook"></i></a></li>
    </ul>
</footer>
<script src="./js/home.js"></script>
</body>

</html>